import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios'

const Index = () => {
    const navigate =useNavigate()
    const [top,setTop] =useState([])
    const fecthData =async ()=>{
        var res =await axios.get("http://122.112.161.135:4000/api/movie/inTheaters")
        setTop(res.data.res)
    }
    const toggle=(id)=>{
        navigate(`/music/coppern/${id}`)
    }
    useEffect(()=>{
        fecthData();
      },[])
    return (
        <div className="item">
            {top.map(item=>{
                return (<div key={item._id} className="clove" onClick={()=>toggle(item._id)}>
                    <img src={item.pic} alt="" />
                    <div className="clo">
                    <p >{item.title}</p>
                    <p>观众评分: <span className="mount">{item.raiting}</span></p>
                    <p>{item.slogo}</p>
                    </div>
                    <button>我的</button>
                </div>)
            })}
        </div>
    );
}

export default Index;
